// HTML渲染
// [
//    刷新次数为:1 , 刷新的时间是: 2024-08-05 09:09:09,
//    刷新次数为:2 , 刷新的时间是: 2024-08-05 09:09:10,
//    刷新次数为:3 , 刷新的时间是: 2024-08-05 09:09:11 
// ]

// 思路:  localstorage



// 先整体 再局部

function updateData(){
  // 1. 从本地读出最新数据

  const list = getList()
  // 2. 取出最后一条
  const lastItem = list[list.length - 1]
  // 3. 次数+1,再存回数据的尾部

  list.push({
    count:lastItem ? lastItem.count + 1 : 1 ,
    time : getFormatTime()
  })

  // 4. 渲染最新数据

  render(list)

  // 5. 保存最新数据
  setList(list)
}

// item 泛型
type Item = {
  count:number,
  time:string
}


const KEY:'ts-key' = 'ts-key'

function getList():Item[]{
  return JSON.parse(localStorage.getItem(KEY) || '[]')
}

function setList(list:Item[]){
  localStorage.setItem(KEY,JSON.stringify(list))
}


function getFormatTime(){
  const _time = new Date()
  const h = _time.getHours()
  const m = _time.getMinutes()
  const s = _time.getSeconds()
  return `${h}:${m}:${s}`
}

function render(list:Item[]){
  const strArr:string[] = list.map((item)=>{
    return `刷新次数为:${item.count} , 刷新的时间是: ${item.time}`
  })
  const app = document.getElementById("app") as HTMLDivElement
  app.innerHTML = strArr.join('<br>')
  
}

updateData()